<template>
  <el-dialog
    title="计划详情"
    :visible.sync="visible"
    width="900px"
    :close-on-click-modal="false"
    class="custom-dialog"
  >
    <div class="wrap" v-loading="loading">
      <u-descriptions-list :column-config="descriptions" :column="2">

        <template #deviceStatus="{item}">
          <dict-tag
            :options="dict.type.device_status"
            :value="item.value"
          />
        </template>

        <template #planStatus="{item}">
          <el-tag :type="getOptionItem(planStatusOptions, item.value).type">
            {{ getOptionItem(planStatusOptions, item.value).label }}
          </el-tag>
        </template>

        <template #issuedStatus="{item}">
          <el-tag :type="getOptionItem(issuedStatusOptions, item.value).type">
            {{ getOptionItem(issuedStatusOptions, item.value).label }}
          </el-tag>
        </template>
      </u-descriptions-list>
      <p class="title">更新模块：</p>

      <el-table
        :data="planData"
        border
        style="width: 100%">
        <el-table-column type="index" label="序号" width="180"/>
        <el-table-column prop="driveName" label="驱动名称"/>
        <el-table-column prop="driveCode" label="驱动编码"/>
        <el-table-column prop="adapterVersion" label="驱动版本"/>
        <el-table-column prop="operationResult" label="状态">
          <template #default="scope">
            {{ scope.row.operationResult === 0 ? '新建' : scope.row.operationResult === 1 ? '执行成功' : '执行失败' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import {reqUpdatePlan} from "@/api/operationAndMonitoring/updatePlan";
import UDescriptionsList from '@/components/UDescriptionsList'

export default {
  name: "PlanDetailDialog",
  dicts: ['device_status'],
  components: {
    UDescriptionsList,
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      // 下发状态 0未下发，1下发成功，-1下发失败
      issuedStatusOptions: [
        {label: '未下发', value: 0, type: 'primary'},
        {label: '下发成功', value: 1, type: 'success'},
        {label: '下发失败', value: -1, type: 'danger'},
      ],
      // 计划状态 0未下发，1下发成功，-1下发失败
      planStatusOptions: [
        {label: '新建', value: 0, type: 'primary'},
        {label: '执行成功', value: 1, type: 'success'},
        {label: '执行失败', value: -1, type: 'danger'},
        {label: '终止成功', value: 2, type: 'success'},
        {label: '终止失败', value: -2, type: 'danger'},
        {label: '部分成功', value: 3, type: 'warning'},
      ],
      descriptions: [
        {label: '计划ID', key: 'planId', span: '1', value: ''},
        {label: '设备ID', key: 'deviceId', span: '1', value: ''},
        {label: '设备部署名称', key: 'deploymentName', span: '1', value: ''},
        {label: '设备状态', key: 'deviceStatus', span: '1', value: '', slot: 'deviceStatus'},
        {label: '计划状态', key: 'planStatus', span: '1', value: '', slot: 'planStatus'},
        {label: '计划执行时间', key: 'executionTime', span: '1', value: ''},
        {label: '下发状态', key: 'issuedStatus', span: '1', value: '', slot: 'issuedStatus'},
        {label: '下发时间', key: 'issuedTime', span: '1', value: ''},
        {label: '人工终止时间', key: 'stopTime', span: '2', value: ''},
        {label: '下发错误信息', key: 'issuedErrrorMessage', span: '2', value: ''},
        {label: '更新错误信息', key: 'errorMessage', span: '2', value: ''},
      ],
      planData: [],
      loading: true
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        return this.$emit('input', val)
      }
    }
  },
  methods: {
    // 获取选项数据
    getOptionItem(options, value, valueProps = 'value', labelProps = 'label') {
      return options.find(item => item[valueProps] === value) || {}
    },
    /** 获取计划详细信息 */
    async getUpdatePlanInfo() {
      try {
        this.loading = true;
        const res = await reqUpdatePlan({
          deviceId: this.form.deviceId,
          planId: this.form.planId
        })
        this.planData = res.data;
      } catch (err) {
        console.log("reqUpdatePlan 接口数据异常", err)
      } finally {
        this.loading = false;
      }
    },
  },
  created() {
    this.descriptions = this.descriptions.map(item => {
      item.value = this.form[item.key]
      return item
    })
    this.getUpdatePlanInfo()
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  height: 75vh;
  overflow: auto;

  .title {
    font-size: 15px;
  }
}
</style>
